import React, { Component } from 'react'
import ProductCss from './product.module.scss'
import {ProductInterface} from '../../types/product.d'
import {connect} from 'react-redux'
import {RouteComponentProps,withRouter} from 'react-router-dom'

interface Iprops extends RouteComponentProps{
    item:ProductInterface,
    addCar:(target:ProductInterface) => void
}

class Product extends Component <Iprops>{
    render() {
        let {id,img,title,price} = this.props.item;
        return (
            <div className={ProductCss.product}>
                <img src={img} alt="" onClick={() => {
                    // this.props.history.push(`/detail/${id}`)
                    this.props.history.push({pathname:'/detail',state:{...this.props.item}})
                }}/>
                <h4>{title}</h4>
                <div>
                    <span>{price}</span>
                    <button onClick={() => {
                        this.props.addCar(this.props.item)
                    }}>+</button>
                </div>
            </div>
        )
    }
}

let stateMapToProps = () => {
    return {}
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        addCar(target:ProductInterface){
            dispatch({type:'ADD_CAR',target})
        }
    }   
}

export default withRouter(connect(stateMapToProps,dispatchMapToProps)(Product))
